<template>
  <div class="r3mShibor">
  <div class="inner-content">
    <div class="titleBox">
      <span class="title">近三月Shibor</span>
      <span class="updateTime">更新于</span>
      <span class="udT">{{date}}</span>
    </div>
    <!--tab-->
    <tab-bar :tabBar="menuTabBar" :on-selected="onBarSelected"></tab-bar>
    <!--<router-view></router-view>-->
    <div style="position: relative;">
    	<loading :ownState='loadingState'></loading>
      <div class="g-legend-wrapper">
    		<span class="g-legend-title g-font-f5">{{chartTime}}</span>
    		<div class="g-legend-content">
    			<span class="g-font-f5 g-legend-item orange">shibor<span class="number">{{shibor}}</span></span>
    		  <span class="g-font-f5 g-legend-item blue">上证指数<span class="number">{{shIndex}}</span></span>
    		</div>
    	</div>
      <div ref="chartLine" class="chart-line"></div>
    </div>
    <!--{{msg}}-->
  </div>
</div>
</template>
<script>
import tabBar from '@/pages/common/TabBar'
import echarts from 'echarts/lib/echarts';
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import { Loop } from '@/common/polling'

export default {
  name: 'l3m-chart',
  data () {
    return {
      menuTabBar: [{name: '隔夜(O/N)'}, {name: '一周(1W)'}],
      msgBar: 0,
      tpmData: {},
      chartTime: '今日',
      date: '',
      chartdata: '',
      shibor: '',
      shIndex: '',
      loadingState: true
    }
  },
  components: {
    tabBar
  },
  methods: {
    onBarSelected (index) {
      if (this.msgBar == index) return;
      this.loadingState = true;
      this.msgBar = index;
      this.getPageData(this.msgBar)
    },
    chartSelected (params) {
      let index = params[0].dataIndex;
      this.chartTime = params[0].axisValue;
      Object.assign(this.$data, {
        shibor: this.chartdata.shiborData.shibor[index],
        shIndex: this.chartdata.shiborData.shIndex[index]
      });
    },
    getPageData(type) {
      (async () => {
        try {
          const [pageData] = await Promise.all([remoteDAO.invoke(constant.InterfaceEnum.GET_L3M_SHIBOR), {type}])
          this.pageInit(pageData)
          this.chartData = pageData
        } catch (err) {
          console.error(`ERROR: ${err}`)
        }
      })()
    },
    pageInit(pageData) {
      this.chartdata = pageData;
      let lineOptions = {
        textStyle: {
          color: '#9a9a9a'
        },
        grid: {
          top: '12%',
          left: '2%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          formatter: this.chartSelected,
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: 'transparent',
              textStyle: {
                color: 'transparent'
              }
            }
          }
        },
        xAxis: [
          {
            data: this.chartdata.shiborData.xTime,
            splitNumber: '3',
            type: 'category',
            boundaryGap: false,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#a5a5a5'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#9a9a9a',
                type: 'dotted'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Shibor%',
            nameTextStyle: {
              color: '#555'
            },
            min: 0,
            max: 8,
            splitNumber: '4',
            splitLine: {
              lineStyle: {
                type: 'dotted'
              }
            },
            position: 'left',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                type: 'dotted',
                color: '#9a9a9a'
              }
            },
            axisLabel: {
              formatter: '{value} %',
              textStyle: {
                color: '#a5a5a5'
              }
            },
            onZero: false
          },
          {
            type: 'category',
            name: '上证指数',
            nameTextStyle: {
              color: '#555'
            },
            data: ['1200', '1800', '2400', '3000', '3600'],
            position: 'right',
            splitNumber: '4',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                type: 'dotted',
                color: '#9a9a9a'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dotted'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#a5a5a5'
              }
            },
            onZero: false
          }
        ],
        series: [
          {
            name: 'Shibor(%)',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#ff7e2f'
              }
            },
            symbol: 'none',
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#Feefe2'
                }])
              }
            },
            data: this.chartdata.shiborData.shibor
          },
          {
            name: '上证指数',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#309fea'
              }
            },
            lineStyle: {
              normal: {
                color: '#309fea',
                type: 'dotted'
              }
            },
            smooth: true,
            symbol: 'none',
            data: this.chartdata.shiborData.shIndex
          }
        ]
      }
      this.chartLine.setOption(lineOptions);
      this.loadingState = false;
    },
    legendInit () {
      let len = this.chartdata.xTime.length - 1;
      this.chartTime = this.chartdata.xTime[len];
      this.shIndex = this.chartdata.shIndex[len];
      this.shibor = this.chartdata.shibor[len]
    }
  },
  mounted: function() {
    this.chartLine = echarts.init(this.$refs.chartLine)
  },
  created() {
    Loop.getInstance().register(this.getPageData);
  },
  watch: {
    chartData: function () {
      this.legendInit();
      this.pageInit();
    }
  },
  beforeDestroy () {
    echarts.dispose(this.chartLine);
  }
}
</script>

<style lang="less" scoped>
  @import '../../../assets/css/common.less';
  @import '../../../assets/css/cssReset';
.inner-content{
  width:96%;
  margin:0 auto;
}
.titleBox{
  text-align:left;
  line-height:0.46rem;
  overflow:hidden;
  height:0.46rem;
  .title{
	  margin:0 auto;
	  font-size:0.16rem;
	  line-height:0.16rem;
	  vertical-align:middle;
	  color:#222222;
	}
}
/*近三月*/
.r3mShibor {
	padding-bottom: 0.15rem;
	.titleBox{
	    border-bottom:1px solid #dddddd;
	}
	.updateTime{
	  font-size:0.12rem;
	  font-family:PingFangSC;
	  text-align:left;
	  vertical-align:middle;
	  color:#999999;
	  line-height:0.16rem;
	}
	.udT{
	  font-family:Helvetica;
	  font-size:0.1rem;
	  color:#999999;
	  line-height:0.16rem;
	  vertical-align:middle;
	  text-align:left;
	}
}
.chart-line {
  width: 100%;
  height: 2.6rem;
}
.g-legend-content{
	padding-left: 0.25rem;
	.g-legend-item {
	  white-space: nowrap;
    width: 50%;
  }
}

</style>
